<html>

	<head>
		<meta charset="utf-8">
		<title>离线下载</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
			
			.mui-table-view-cell {
				padding-right: 0px;
			}
			/***已下载**/
			
			.mui-slider-handle.ed {
				height: 80px;
				white-space: nowrap;
			}
			
			.mui-slider-handle.ed .resimg {
				float: left;
				height: 70px;
				width: 28%;
				margin-top: 5px;
				border:1px solid #ececec;
			}
			
			.mui-slider-handle.ed div {
				float: left;
				80%;
			}
			
			.mui-slider-handle.ed span {
				margin-left: 10px;
			}
			
			.mui-slider-handle.ed p {
				margin-left: 32px;
				padding: 2px 6px 2px 6px;
			}
			
			.mui-slider-handle.ed p img {
				margin-right: 14px;
				margin-top: 3px;
			}
			
			.mui-slider-handle.ed span.type {
				width: 50px;
				text-align: center;
				color: #fff;
				font-size: 12px;
				padding: 2px 6px 2px 6px;
				margin-left: 20px;
			}
			span.sp{background:#4cc8e7;}
		    span.jy{background:#ff9d34;}
		    span.xt{background:#ff9d34;}
		    span.st{background:#a5b9eb;}
		    span.stjc{background:#799aed;}
		    span.tp{background:#95c85d;}
		    span.kj{background:#ff8873;}
			/***正在下载**/
			
			.mui-slider-handle.ing {
				height: 105px;
				white-space: nowrap;
			}
			
			.mui-slider-handle.ing .resimg {
				float: left;
				height: 70px;
				width: 28%;
				margin-top: 5px;
				border:1px solid #ececec;
			}
			
			.mui-slider-handle.ing .dinfo {
				float: left;
				80%;
			}
			
			.mui-slider-handle.ing .dinfo span {
				margin-left: 10px;
			}
			
			.mui-slider-handle.ing p {
				margin-left: 32px;
				padding: 2px 6px 2px 6px;
			}
			
			.mui-slider-handle.ing p img {
				margin-right: 14px;
				margin-top: 3px;
			}
			
			.mui-slider-handle.ing span.type {
				width: 50px;
				text-align: center;
				color: #fff;
				font-size: 12px;
				padding: 2px 6px 2px 6px;
				margin-left: 20px;
			}
			.progress{
				float:left;
				width:97%;
				height:22px;
				border-bottom: 2px solid #e4e4e4;
				color:#aeaeae;
				font-size:15px;
				margin:5px 0px 0px -5px;
			}
			.progress .ping{
				border-bottom: 2px solid #3ac9af;
				width:0%;
			}
			.progress .p3{
				float:right;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div style="padding: 10px 10px;">
				<div id="segmentedControl" class="mui-segmented-control">
					<a class="mui-control-item mui-active" href="#item1" id="downloadedBtn">已完成</a>
					<a class="mui-control-item" href="#item2" id="downloadingBtn">未完成</a>
				</div>
			</div>
			<div>
				<div id="item1" class="mui-control-content mui-active">
					<ul class="mui-table-view" id="downloaded">
						<!--
						<li class="mui-table-view-cell">
					       <div class="mui-slider-right mui-disabled">
						     <a class="mui-btn mui-btn-red">删除</a>
					       </div>
					       <div class="mui-slider-handle ed">
						      <img src="../images/down_default.png" class="resimg"/>
						      <div>
						      <span class="sp">视频</span><span>电流表的样子电流表</span>
						      
						      <p><img src="../images/icon62.png" />机械设计基础</p>
						      <p><img src="../images/icon62.png" />机械</p>
						      </div>
					        </div>
				         </li>
				         -->
					</ul>
				</div>
				<div id="item2" class="mui-control-content">
					<ul class="mui-table-view" id="downloading">
							<!--
						<li class="mui-table-view-cell">
							<div class="mui-slider-right mui-disabled">
								<a class="mui-btn mui-btn-red">删除</a>
							</div>
							<div class="mui-slider-handle ing">
								<img src="../images/down_default.png" class="resimg" />
								<div class="dinfo">
									<span class="sp">视频</span><span>电流表的样子电流表</span>

									<p><img src="../images/icon62.png" />机械设计基础</p>
									<p><img src="../images/icon62.png" />机械</p>
								</div>
								<div class="progress">
									<div><span class="p1">12.5M</span><span class="p2">/20M</span><span class="p3">下载中</span></div>
									<div class="ping" style="width:50%"></div>
								</div>
							</div>
						</li>
                       -->
					</ul>
				</div>
			</div>
		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script src="../js/zepto.min.js"></script>
	<script src="../js/DMobileFrame_DownLoadUtil.js"></script>
	<script src="script/offlineindex.js"></script>

</html>